<template>
    <div class="app-container" v-loading="loading">
        <levelbar></levelbar>
        <el-form label-width="86px" class="app-content form-box"
        :model="ruleForm" >
            <div class="box">
                <div class="tea-infor">
                    <div class="form-title">任教班级</div>
                </div>
                 <div class="form-item">
                     <div v-if="ruleForm.addLenList.length=='0'&&showNull" class="add-box"> 
                         <span>暂时还没有任教班级</span>
                         <span class="go-add"  @click="addTeacherClass">现在去添加</span>
                     </div>
                     <!-- 普通学校 有年级-->
                        <div v-if="schoolType=='0'&&ruleForm.addLenList.length" class="clearfix">
                                <div class="row-con">
                                    <el-col :span="12-(index%2==0?0:1)" v-for="(site,index) in ruleForm.addLenList" 
                                    :key="index" class="bg-hover" :offset="index%2==0?0:1">
                                        <span class="tea-class">任教班级<{{index+1}}></span>
                                        <el-row :gutter="20">
                                            <el-col>
                                                <el-form-item label="科目：">
                                                    <span>{{site.subject||'--'}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col>
                                                <el-form-item label="年级：">
                                                    <span>{{site.gradeName||'--'}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col>
                                                <el-form-item label="班级名称：" >
                                                     <span>{{site.className||'--'}}</span>
                                                </el-form-item>
                                            </el-col>
                                            <span class="del-btn del-btn-show" @click.prevent="removeDomain(index)">删除</span>
                                        </el-row>
                                    </el-col>
                                </div>
                        </div>
                        <!-- 培训机构 没有年级-->
                        <div v-if="schoolType=='1'&&ruleForm.addLenList.length" class="clearfix">
                                <div class="row-con">
                                    <el-col :span="12-(index%2==0?0:1)" v-for="(site,index) in ruleForm.addLenList" 
                                    :key="index" class="bg-hover" :offset="index%2==0?0:1">
                                        <span class="tea-class">任教班级<{{index+1}}></span>
                                        <el-row :gutter="20">
                                             <el-col>
                                                <el-form-item label="科目：" label-width="70px">
                                                    <span>{{site.subject||'--'}}</span>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                         <el-row :gutter="20">
                                            <el-col>
                                                <el-form-item label="班级名称：" >
                                                <span >{{site.className||'--'}}</span>
                                                </el-form-item>
                                            </el-col>
                                            <span class="del-btn del-btn-show" @click.prevent="removeDomain(index)">删除</span>
                                        </el-row>
                                    </el-col>
                                </div>
                        </div>
                        <div style="margin-left:14px;margin-top:30px;">
                            <span @click="addTeacherClass" class="addMessage" v-if="ruleForm.addLenList.length>'0'">
                                <i class="el-icon-plus"></i> 继续添加
                            </span>
                        </div>
                </div>
            </div>
            <div class="form-item footer">
                    <el-row>
                        <el-col :span="24">
                            <div >
                              <el-button @click="resetForm('ruleForm')">返回</el-button>
                            </div>
                        </el-col>
                    </el-row>
            </div>
        </el-form>
         <addTeaClass :addTeaClass="addTeaClass" @search-list="listTeacherClass"> </addTeaClass>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import addTeaClass from './comps/addTeaClass';
import { mapGetters } from 'vuex';
import { listTeacherClass, removeTeacherClass} from 'api/teacherManage';
export default {
    name: 'correct',
    components: { Levelbar, addTeaClass},
    data() {
        return {
            loading: true,
            showNull: false,
            schoolLoading: false,
            schoolType: '',
            currIndex: null,
            formInline: {},
            ruleForm: {
                addLenList: []
            },
            thisIdHaveNumber: 0, // 该id的数目
            teacherInfor: {}, // 整页的教师信息
         
            addTeaClass: {
                dialogAddTea: false,
                teacherId: this.$route.params.teacherId,
                addLenList: [],
                schoolType: this.$route.params.schoolType
            },
            isShowBtn: false

        }
    },
    created() {
        this.listTeacherClass(this.$route.params.teacherId);// 查询教师信息
        this.schoolType=this.$route.params.schoolType;
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName'
        ])
    },
    methods: {
        // 展示添加教师弹窗
        addTeacherClass() {
            this.addTeaClass.dialogAddTea = true;
        },
         // 查询教师信息
        listTeacherClass(teacherId) {
            listTeacherClass(teacherId, this.schoolId).then(res => {
                this.ruleForm.addLenList=[];
                this.addTeaClass.addLenList=[];
                this.showNull=true;
                this.loading=false;
                if (res.data.content.length) {// 如果在任教班级有多组（生成多行）如果在任教班级有多组（生成多行）
                    this.ruleForm.addLenList=res.data.content;
                    this.addTeaClass.addLenList=res.data.content;
                } 
            }).catch(() => {
                this.loading=false;
            });
        },
        // 删除新增的列的按钮
        removeDomain(index) {
            this.$confirm('确定删除该任教班级？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading=true;
                let teacherId=this.$route.params.teacherId;
                let schoolId=this.schoolId;
                let classId=this.ruleForm.addLenList[index].classId;
                let relationId=this.ruleForm.addLenList[index].relationId;
                this.removeTeacherClass(teacherId, schoolId, classId, relationId)
            })
        },
          // 删除班级
        removeTeacherClass(teacherId, schoolId, classId, relationId) {
            removeTeacherClass(teacherId, schoolId, classId, relationId).then(res => {
                this.$message.success('删除成功!');
                this.listTeacherClass(teacherId)
            })
        },
        // 重置
        resetForm(dataForm) {
            this.$router.push({path: '/teacherManage/teacherManage'});
        }
    }
}
</script>
 
<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 0px;
}
.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: rgb(106, 85, 72);
    line-height: 1;
    padding: 4px 12px 11px 0;
    box-sizing: border-box;
}
$bgcolor: #fff;
 .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
.addMessage{
    color:#ff5e2c;
    font-size:14px;
    cursor: pointer;
    i{
        font-size: 10px;
    }
}
@mixin showTitle() {
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .add-box{
        margin-top:280px;
        color:#ccc;
        font-size:14px;
        text-align: center;
        .go-add{
            color: #ff5e2c;
            cursor: pointer;
        }
    }
    .el-form {
       .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
        }
    }
}
.form-box {
        padding: 0px 50px 0;
        @include showTitle();
        .form-item {
        padding-bottom: 40px;
        margin-top:30px;
        }
        .form-title {
           padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
        }
        .tea-class{
            display: inline-block;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 12px;
            margin-bottom:10px;
        
        }
        .del-btn{
            position: absolute;
            bottom:0px;
            right: 12px;
            width:46px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            display: none;
        }
        .bg-hover{
            position: relative;
             cursor: pointer;
            margin-top:30px;
            &:hover{
                background: #fafafa;
                .del-btn-show{
                    position: absolute;
                    display: inline-block;
                    width:46px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    font-size: 14px;
                    color:#ff5e2c;
                }
            }
            
        }
}
.box{
   position: relative;
    min-height: 760px;
}
</style>